//导航类
class navC {

    http = 'http://localhost:3000';
    navli = document.querySelectorAll('.nav2');
    navspan = document.querySelectorAll('.nav2span');
    navli2 = document.querySelectorAll('.nav3');
    navspan2 = document.querySelectorAll('.nav2span1');
    fixed = document.querySelector('#fixed');
    body = document.querySelector('body');


    constructor() {
            // console.log(this.fixed);
            // console.log(this.body);
            // console.log(this.scrollTop);
            // console.log(this.navli, this.navspan);
            this.navli.forEach((ele, key) => {
                // console.log(ele, key);
                ele.onmouseover = this.liover.bind(this, key);

            })
            this.navli2.forEach((ele, key) => {
                // console.log(ele, key);
                ele.onmouseover = this.liover.bind(this, key);

            })



            //上栏导航滚动事件
            this.body.onscroll = this.bodyscroll;


        }
        //li移入事件

    liover(key) {

            this.spanhtml(key);
        }
        //向span中添加数据
    spanhtml(key) {
        //当鼠标移入第一个'居家生活'导航时获取的数据
        //向内容函数传入key和id值
        if (key == 0) this.content(key, 'home');
        if (key == 1) this.content(key, 'clothing');
        if (key == 2) this.content(key, 'cate');
        if (key == 3) this.content(key, 'clean');
        if (key == 4) this.content(key, 'baby');
        if (key == 5) this.content(key, 'sports');
        if (key == 6) this.content(key, 'wiring');
        if (key == 7) this.content(key, 'selection');





    }

    //二级菜单内容函数
    async content(key, id) {
        let res = await axios.get(this.http + '/' + id);
        let data = res.data;
        let html = '';
        // console.log(data);


        data.forEach((ele) => {
                // console.log(ele);
                html +=
                    `<div class="fload">
            <h4 class=".nav2h4">${ele.title}</h4>
        <ul >
        <li>${ele.labal}</li>
        <li>${ele.labal1}</li>
        <li>${ele.labal2}</li>
        <li>${ele.labal3}</li>
        <li>${ele.labal4}</li>
        <li>${ele.labal5}</li>
        </ul>
        </div>
        `
                this.navspan[key].innerHTML = html;
                this.navspan2[key].innerHTML = html;

            })
            //设置内容的宽度排列
        let fload = document.querySelectorAll('.fload');
        //求出数据的长度
        let floadss = data.length;
        //遍历数组,给每个fload设置宽度
        fload.forEach((e) => {

            // console.log(e);
            e.style.width = 1000 / floadss + 'px';
        })

    }

    //鼠标滚动事件
    bodyscroll() {
        //页面滚动监听导航
        let scrollTop = document.documentElement.scrollTop;
        // console.log(scrollTop);
        if (scrollTop > 200) {
            this.fixed.style.display = 'block';

        } else {
            this.fixed.style.display = 'none';

        }
    }

    


}
new navC();



//下方滚动动画
class cartoon {
    every = document.querySelector('.every2');
    every2lang = document.querySelectorAll('.every2-1').length;
    every2=document.querySelectorAll('.every2-1');
    btnleft = document.querySelector('.btnleft');
    btnright = document.querySelector('.btnright');
    constructor() {
        this.Interout();
        this.every.onmouseover = this.everyover.bind(this);
        this.every.onmouseout = this.everyout.bind(this);
        this.btnleft.onclick = this.leftclick.bind(this);
        this.btnright.onclick = this.rightclick.bind(this);
        this.every2.forEach((i)=>{
            i.onclick=this.evert2click.bind(this);
        })
    }

    //定时器
    Interout() {
        let left = 0;
        let time;
        let cont = 0;
        // console.log(parseInt(this.every.style.left));
        this.info = false;

        time = setInterval(() => {
            this.every.style.transition='all 1s';

            if (this.info) {

                return;
            }
            cont++;
            left -= 365;

            this.every.style.left = left + 'px';
            // console.log(left);
            if (cont == (this.every2lang - 2)) {

                cont = 0;
                left = 0;
                this.every.style.transition='none';

                this.every.style.left = 0;
            }



        }, 1500)



    }
    everyover(time) {
        this.info = true;

    }
    everyout() {

        this.info = false;
    }
    leftclick() {
        // this.every.style.left
        this.info = true;

        if (parseInt(this.every.style.left) < 0) {

            this.every.style.left = (parseInt(this.every.style.left) + 365) + 'px'


        }


    }
    rightclick() {

        this.info = true;
        if (parseInt(this.every.style.left) > (this.every2lang - 3) * (-365)) {

            this.every.style.left = (parseInt(this.every.style.left) - 365) + 'px'
        }

    }
    evert2click(){

        location.assign('./details.html');

    }

}
new cartoon();


//跳转

class skip{
    a=document.querySelectorAll('.nav2');
    new=document.querySelectorAll('.new1child');
    moods=document.querySelectorAll('.moods2');
    shoppingA=document.querySelector('.shoppingA');

    constructor(){
        this.shoppingA.onclick=function(){

            if(!(localStorage.getItem('login')-0)){
                location.assign('./login.html');

            }else{
            location.assign('./shoping.html');

            }

        }


        //给每个a标签绑定点击事件
        this.a.forEach((i)=>{
            i.onclick=function(){
                
                location.assign('./browse.html');

            }

        })

        this.new.forEach((i)=>{
            i.onclick=function(){
                
                location.assign('./details.html');

            }

        })

        this.moods.forEach((i)=>{
            i.onclick=function(){
                
                location.assign('./details.html');

            }

        })

    }





}
new skip();

